<!--  -->
<template>
    <div class="box">
        <div class="title">{{title}}</div>
        <div class="swiper-container">
            <banner-content class="swiper-wrapper" :data="hotFilms"></banner-content>
        </div>
    </div>
</template>

<script>
    import BannerContent from './banner/bannerContent.vue';
    import {
        mapActions,
        mapState
    } from "vuex"
    export default {
        data() {
            return {
                title: "热映",
            };
        },
        components: {
            BannerContent
        },
        mounted() {
            console.log(this.ct,"111");
            this.getHotFilmsData({lit:null,ct:this.ct})
        },

        methods: {
            ...mapActions("hotFilms", ["getHotFilmsData"]),

            
        },
        computed: {
            ...mapState("hotFilms", ["hotFilms"]),
            ...mapState("ct", ["ct"])
        }
    }
</script>
<style lang='scss' scoped>
    .box {
        height: 2.35rem;
        overflow: scroll;
        border: solid 0.005rem #d8d8d8;
        background-color: #fff;

        >.title {
            height: 0.4rem;
            background-color: #fff;
            font-size: 0.24rem;
            line-height: 0.4rem;
            color: #343434;
            text-align: left;
            padding-left: 0.11rem;
        }

        .swiper-container {
            overflow: scroll;
        }

        .swiper-wrapper {
            height: 1.9rem;
            display: flex;
            flex-flow: column, nowrap;

        }
    }
</style>